<template>
  <div class="app-intro">
    <div class="divider"></div>
    <div v-for="(item,index) in data" class="tabClass" v-bind:style="{left: index*1.45 + 'rem'}" @click="goDetailIndex(index)">
      <img :src="item.pic">
      <p>{{item.name}}</p>
    </div>
    <div class="appointClass">
      <button>预约</button>
    </div>
  </div>
</template>
<style lang="less" scoped>
  .app-intro {
    background-color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 1rem;
    font-size:0;
    .divider {
      height: 0.03rem;
      width: 100%;
      display: block;
      float: left;
      background-color: #eeeeee;
    }
    .tabClass {
      width: 1.45rem;
      height: 1rem;
      position: absolute;
      font-size: 0;
      img {
        width: 0.5rem;
        height: 0.5rem;
        display: block;
        margin: 0 auto;
        margin-top: 0.16rem;
      }
      p {
        margin-top: 0rem;
        display: inline-block;
        font-size: 0.25rem;
        width: 0.5rem;
        height: 0.2rem;
      }
    }
    .appointClass {
      display: block;
      float: right;
      width: 1.5rem;
      height: 100%;
      button {
        width: 100%;
        height: 100%;
        text-align: center;
        background-color: red;
        color: white;
        font-size: 0.3rem;
        border: 0;
      }
    }
  }
</style>
<script>
  export default {
    data () {
      return {
        data: [
          {pic:'../../../static/artist_detail/picture_button@2x.png',highPic:'../../../static/artist_detail/picture_buttonClick@2x.png',name:'图片',isHighlight:false},
          {pic:'../../../static/artist_detail/video_button@2x.png',highPic:'../../../static/artist_detail/video_buttonClick@2x.png',name:'视频',isHighlight:false},
          {pic:'../../../static/artist_detail/collect_button@2x.png',highPic:'../../../static/artist_detail/collect_buttonClick@2x.png',name:'收藏',isHighlight:false},
          {pic:'../../../static/artist_detail/btn_shoucang@2x.png',highPic:'../../../static/artist_detail/btn_shoucang_s@2x.png',name:'关注',isHighlight:false}
          ]
      }
    },
    props: {
      title: String,
      content: String,
      showDevider: Boolean,
      aId: String
    },
    methods: {
        goDetailIndex(index) {
          var that = this;
          switch (index) {
            case 0:window.location.href = '/artistDetail/picShow.html?artistId=' + that.aId;break
            case 1:window.location.href = '/artistDetail/videoShow.html?artistId=' + that.aId;break
            case 2:alert('收藏');break
            case 3:alert('关注');break
          }
        }

    }
  }
</script>
